<template>
  <div class="flashsale" :class="className">
    <div v-html="css"></div>
    <div class="flashSaleCoupon coupon_list" :style="{ '--theme_color_txt': datas.theme_color }">
      <div class="lis_cloum" v-for="item in datas.list" :key="item.id">
        <div class="lis" v-if="item.coupon">
          <div class="lis_l" v-if="item.coupon.discount_rule_str">
            <div class="lis_l_t">
              <span class="small" v-if="item.coupon.discount_rule_str.is_price == 1">¥</span>
              {{ item.coupon.discount_rule_str.discount }}
              <span v-if="item.coupon.discount_rule_str.is_rebate == 1">折</span>
            </div>
            <div class="lis_l_b">{{item.coupon.discount_rule_str.desc}}</div>
          </div>
          <div class="lis_r">
            <div class="lis_r_title">{{ item.coupon.coupon_name }}</div>
            <div class="list_r_type">{{ item.coupon.coupon_type_name }}</div>
            <div class="list_r_bottom">
              <div class="list_r_bottom_l">
                <span class="small">{{ $i18n.t("money") }}</span>
                <span class="price">{{ item.price }}</span>
              </div>
              <div class="list_r_bottom_r" v-if="timeStatus(item) == 1" @click="toOrder(item)">立即秒杀</div>
              <div class="list_r_bottom_r list_r_bottom_r_none" v-else>立即秒杀</div>
            </div>
          </div>
        </div>
        <div class="lis_bottom">
          <span>{{ timeCheckTXT(item) }}</span>
          <div class="bottom_time" v-if="timeStatus(item) != 2">
            <van-count-down :time="timeSelect(item)">
              <template #default="timeData">
                <template v-if="timeData.days > 0">
                  <span class="block">{{ timeData.days }}</span>
                  <span class="colon">天</span>
                </template>
                <span class="block">{{ timeData.hours < 10 ? "0" + timeData.hours : timeData.hours }}</span>
                <span class="colon">:</span>
                <span class="block">{{ timeData.minutes < 10 ? "0" + timeData.minutes : timeData.minutes }}</span>
                <span class="colon">:</span>
                <span class="block">{{ timeData.seconds < 10 ? "0" + timeData.seconds : timeData.seconds }}</span>
              </template>
            </van-count-down>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
// 自定义样式
const css = function() {
  // 确保数据已传入
  const { preview_color, price_color } = this.datas;

  return `
      .component-${this.id} .flashSaleCoupon {
        background-color: ${preview_color};
      }
      .component-${this.id} .flashSaleCoupon .list_r_bottom_l{
        color: ${price_color}
      }
  `;
};
export default {
  props: ["id", "datas", "tabcontrol", "lastIndex", "index", "plugin_active", "isBottom"],
  computed: {
    css() {
      return "<style>" + css.call(this) + "</style>";
    },
    className() {
      const name = ["component-wrapper", `component-${this.id}`];
      return name;
    },
    timeSelect(item) {
      return function(item) {
        let now = (new Date().getTime() / 1000).toFixed(0);
        let end = item.end_time;
        let start = item.start_time;
        if (now < start) {
          return start - now + "000";
        } else if (now < end && now > start) {
          return end - now + "000";
        }
      };
    },
    timeCheckTXT(item) {
      return function(item) {
        let now = (new Date().getTime() / 1000).toFixed(0);
        let end = item.end_time;
        let start = item.start_time;
        if (now < start) {
          return "距离活动开始：";
        } else if (now < end && now > start) {
          return "距离活动结束：";
        } else if (now > end) {
          return "活动已结束";
        }
      };
    },
    timeStatus(item) {
      return function(item) {
        let now = (new Date().getTime() / 1000).toFixed(0);
        let end = item.end_time;
        let start = item.start_time;
        if (now < start) {
          return 0;
        } else if (now < end && now > start) {
          return 1;
        } else if (now > end) {
          return 2;
        }
      };
    }
  },
  data() {
    return {};
  },
  mounted() {},
  methods: {
    async toOrder(item) {
      let json = {
        address: "",
        goods: `[{"goods_id":${item.goods_id},"total":1,"option_id":"0"}]`,
        member_coupon_ids: "[]",
        orders: "[]",
        invoice: {},
        mark: 0,
        dispatch_type_id: 1,
        first_default: "",
        cart_ids: "[]",
        positioning_success: 0,
        province: "",
        city: ""
      };
      if (!item.coupon.coupon_restrict) {
        // 需要绑定车牌
        this.$router.push(this.fun.getUrl("carNumber", { id: item.coupon_id, orderGoodsId: item.goods_id }));
        return;
      }
      let { data, msg, result } = await $http.post("plugin.new-coupon.frontend.controllers.flash-sale.index", json, "");
      if (result) {
        this.$router.push(this.fun.getUrl("orderpay", { order_ids: data.order_ids }));
      } else {
        this.$toast(msg);
      }
    }
  }
};
</script>
<style lang="scss" scoped>
.flashsale {
  overflow: hidden;
  .coupon_list {
    padding: 0.63rem 0.75rem;
    box-sizing: border-box;
    overflow: hidden;
    .lis_cloum {
      position: relative;
      background: #ffffff;
      border-radius: 0.63rem;
      margin-top: 0.63rem;
      box-shadow: 0rem 0.19rem 0.47rem 0.03rem #f0f0f1;
      .lis_bottom {
        width: 100%;
        height: 2rem;
        line-height: 2rem;
        background: #ffffff;
        padding: 0 0.63rem;
        text-align: left;
        border-radius: 0 0 0.63rem 0.63rem;
        font-size: 0.75rem;
        color: #aaaab3;
        display: flex;
        align-items: center;
        .block {
          font-weight: 500;
          font-size: 0.75rem;
          color: var(--theme_color_txt);
          padding: 0.19rem;
          border-radius: 0.25rem;
          background: #feeded;
        }
        .colon {
          font-weight: 500;
          font-size: 0.75rem;
          color: var(--theme_color_txt);
          margin: 0 0.16rem;
        }
      }
      .lis {
        position: relative;
        padding: 0.53rem 0;
        box-sizing: border-box;
        background: #ffffff;
        overflow: hidden;
        display: flex;
        justify-content: space-between;
        box-shadow: 0rem 0.19rem 0 0 #f0f0f1;
        border-radius: 0.63rem 0.63rem 0.63rem 0.63rem;
        .buttonPos {
          position: absolute;
          z-index: 1;
          top: 1.8rem;
          left: 8rem;
          width: 5.88rem;
          height: 2rem;
          background: #f15353;
          border-radius: 1rem 1rem 1rem 1rem;
          text-align: center;
          line-height: 2rem;
          font-weight: 500;
          font-size: 0.88rem;
          color: #ffffff;
        }
        .lis_l {
          width: 6.88rem;
          border-right: 1px dashed #d6d6dc;
          flex-shrink: 0;
          display: flex;
          flex-direction: column;
          justify-content: center;
          .lis_l_t {
            font-size: 1.5rem;
            font-weight: bold;
            color: var(--theme_color_txt);
            .small {
              font-size: 0.7rem;
            }
          }
          .lis_l_b {
            font-size: 0.75rem;
            color: var(--theme_color_txt);
          }
        }
        .lis_r {
          flex: 1;
          padding: 0 0.72rem;
          box-sizing: border-box;
          overflow: hidden;
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          align-items: flex-start;
          .lis_r_title {
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2;
            overflow: hidden;
            text-overflow: ellipsis;
            font-weight: bold;
            font-size: 0.88rem;
          }
          .list_r_type {
            flex-shrink: 0;
            padding: 0 0.22rem;
            height: 1.13rem;
            line-height: 1.13rem;
            border-radius: 0.31rem;
            background: #fef1f1;
            font-size: 0.75rem;
            color: var(--theme_color_txt);
            margin-top: 0.28rem;
          }
          .list_r_bottom {
            width: 100%;
            overflow: hidden;
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-top: 0.25rem;
            .list_r_bottom_r {
              font-size: 0.75rem;
              color: #ffffff;
              padding: 0.5rem 0.59rem;
              box-sizing: border-box;
              background: var(--theme_color_txt);
              border-radius: 1.25rem;
            }
            .list_r_bottom_r_none {
              background: #aaaab3;
            }
            .list_r_bottom_l {
              .small {
                font-weight: bold;
                font-size: 0.9rem;
              }
              .price {
                font-weight: bold;
                font-size: 1.25rem;
              }
            }
          }
        }
      }
      .lis::after {
        content: "";
        position: absolute;
        width: 0.5rem;
        height: 0.5rem;
        left: 6.6rem;
        top: -0.2rem;
        background: #000;
        border-radius: 50%;
        // border: 0.03rem solid var(--wlborder);
        background: #f0f0f1;
      }
      .lis::before {
        content: "";
        position: absolute;
        width: 0.5rem;
        height: 0.5rem;
        left: 6.6rem;
        bottom: -0.25rem;
        background: #000;
        border-radius: 50%;
        // border: 0.03rem solid var(--wlborder);
        background: #f0f0f1;
        z-index: 1;
      }
      .posbg {
        content: "";
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        background: #000;
        opacity: 0.5;
      }
    }
    .lis_cloum:first-child {
      margin-top: 0;
    }
  }
}
</style>
